<template>
	<view>
		<view class="nav fixed bg-blue" :style="[{height:CustomBar + 'px'}]">
			<view class="cu-bar search bg-blue" style="z-index: 999;" :style="[{'padding-top': StatusBar + 'px'},{'min-height':CustomBar+'px'}]">
				<view class="action" @tap="BackPage">
					<text class="cuIcon-back"></text>
					<slot name="backText"></slot>
				</view>
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input v-model="kw" @focus="boxDown" :adjust-position="false" type="text" placeholder="歌曲 / 歌手" @confirm="search()" confirm-type="search()"></input>
					 <view class="text-lg" v-show="kw" @tap="cleanEven"><text class="cuIcon-roundclosefill text-gray "></text></view>
					<!-- <button class="cu-btn round bg-yellow text-white cu-btn-left-no-round" @tap="search()">搜索</button> -->
				</view>
				<view style="margin-right: 116px;" class="user-btn-round  bg-yellow round" @tap="Tool.navigateTo({url:'../user/index'})"><text class="cuIcon-my"></text></view>
			</view>
			<view style="z-index: 1;" class="bg-blue padding-top animated" :class="boxCls">
				<scroll-view class="bg-white radius-top" scroll-y="true" :style="[{'height':boxHeight+'px'}]">
					<view v-show="resEmpyt" class="text-center text-bold padding-top-sm">未能找到您要的结果！</view>
					<view class="padding">
						<view class="text-bold">
							历史搜索
							<text class="cuIcon-delete" style="float: right;font-weight: 100;" @tap="delHistory"></text>
						</view>
						<view class="padding-bottom-xs padding-top-xs flex flex-wrap">
							<view @tap="search(keyword)" class="cu-tag round margin-top-xs" v-for="(keyword, index) in History" :key="index">
								{{keyword}}
							</view>
						</view>
						<view class="text-bold margin-top-xs">热门搜索</view>
						<view class="padding-bottom-xs padding-top-xs flex flex-wrap">
							<view @tap="search(item.keyword)" class="cu-tag round margin-top-xs bg-red light" v-for="(item, index) in hostKeyword"
							 :key="index">
								{{item.keyword}}
							</view>
						</view>
						<view v-show="hostKeywordLoad" class="cu-load bg-white loading"></view>
					</view>
				</scroll-view>
				<view class="text-center bg-white solid-top text-bold padding" @tap="hideBox">
					<text class="cuIcon-roundclose margin-right-xs"></text> 关闭
				</view>

			</view>
		</view>

		<view :style="[{'padding-top': CustomBar + 'px'}]">
			<view @tap="link_url(item.id)" v-for="(item, key) in list" :key="key" class="padding bg-white margin-bottom-sm">
				<view class="flex margin-bottom-sm">
					<view class="flex-twice flex justify-start align-start">
						<view :class="item.cate_info.class" class="cu-tag radius" style="max-width: 15%;">{{item.cate_info.tag}}</view>

						<view class="text-bold margin-left-xs text-lg text-cut" style="max-width: 430rpx;">{{item.title}}</view>
						<!-- <view class="margin-left-xs text-cut text-sm" style="max-width: 115rpx;">{{item.singer_name}}</view> -->
					</view>
					<view class="flex-sub text-right text-red flex justify-end align-center">
						<text class="cuIcon-hot margin-right-xs"></text>
						<text class="text-bold">{{item.click}}</text>
					</view>
				</view>
				<view>
					<view class="cu-capsule round margin-right-xs opacity6">
						<view class='cu-tag bg-red sm'>
							歌手
						</view>
						<view class="cu-tag line-red sm">
							{{item.singer_name}}
						</view>
					</view>
					<!-- <view class="cu-capsule round margin-right-xs opacity6">
						<view class='cu-tag bg-blue sm' :class="item.mode_info.class">
							乐器
						</view>
						<view class="cu-tag line-blue sm">
							{{item.cate_info.title}}
						</view>
					</view> -->
					<view class="cu-capsule round margin-right-xs opacity6">
						<view class='cu-tag sm' :class="item.mode_info.class">
							演奏
						</view>
						<view class="cu-tag line-green sm">
							{{item.mode_info.title}}
						</view>
					</view>

				</view>
			</view>
		</view>
		<view v-show="erroText" class="text-center" @tap="search()" style="padding: 50% 0;">
			{{erroText}}
		</view>
		<view style="height: 60px;">
			<view v-show="loadShow" class="cu-load bg-white" :class="loadClass"></view>
			<view v-show="loadText" class="bg-white padding text-center">{{loadText}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fields: {},
				list: [],
				boxCls: 'none',
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				kw: '',
				page: 1,
				last_page: 0,
				reqLock: false, //请求锁，防止重复请求同一页
				winHeight: 0,
				boxHeight: 200,
				erroText: '',
				resEmpyt: false,
				loadShow: false,
				loadText: '',
				loadClass: 'loading',
				hostKeyword: [],
				hostKeywordLoad: true,
				History: [],
				HistoryKey: this.cacheKey.searchHistory
			}
		},
		onLoad(param) {

			if(!param.kw) {
				this.boxDown();
				return false;
			}
			
			uni.getSystemInfo({
				success: (res) => {
					let wh = res.windowHeight - this.CustomBar - 60;
					this.boxHeight = wh;
				}
			})

			this.kw = param.kw;
			this.getData(1);
		},
		onReachBottom(e) {
			this.loadShow = true;
			if ((this.last_page + 1) == this.page) {
				this.loadShow = false;
				this.loadTextFunc();
			} else if (!this.reqLock) {
				this.getData(this.page)
			}
		},
		methods: {
			cleanEven(){
				this.kw = '';
			},
			setHistory() {
				// let a = ['陈奕迅','刘德华','张惠妹'];
				// let b = a.findIndex((res)=>{
				// 	return res === '刘德华2';
				// });
				// if(!this.kw) return false;
				
				let historySearchKeyword = this.Tool.getStorage(this.HistoryKey);

				if (!historySearchKeyword) {
					historySearchKeyword = [this.kw];
					this.Tool.setStorage(this.HistoryKey, historySearchKeyword);
				} else {
					const kwLen = historySearchKeyword.length;
					
					if(kwLen>=10) historySearchKeyword.splice(kwLen-1,1);
					
					let isExist = historySearchKeyword.findIndex(res => {
						return res === this.kw;
					});
					
					if (isExist >= 0) historySearchKeyword.splice(isExist, 1);
					historySearchKeyword.unshift(this.kw);
					this.Tool.setStorage(this.HistoryKey, historySearchKeyword);
				}

				this.History = historySearchKeyword;
			},
			delHistory() {
				uni.removeStorage({
					key: this.HistoryKey,
					success: () => {
						this.History = [];
					}
				})
			},
			getSearchKeyword() {

				if (this.hostKeyword.length) return false;

				uni.request({
					url: this.Tool.url('gsk'),
					success: (res) => {
						if (res.statusCode !== 200 || res.data.status !== 200) return false;
						this.hostKeyword = res.data.data;
					},
					complete: () => {
						this.hostKeywordLoad = false;
					}
				})
			},
			loadTextFunc() {
				this.loadText = '为您找到 ' + this.fields.total + ' 条数据！'
			},
			search(keyword) {
				if (keyword) this.kw = keyword;
				console.log(this.kw)
				this.getData(1);
			},
			getData(page) {
				
				if(!this.kw) return false;
				
				this.reqLock = true;
				this.resEmpyt = false;
				this.loadText = '';
				this.loadShow = false;
				// uni.showLoading({
				// 	title: page > 1 ? '正在翻页中···':'正在查找···'
				// });
				this.setHistory();

				if (page > 1) {
					this.loadShow = true;
				} else {
					uni.showLoading({
						title:'正在查找···'
					});
				}

				this.erroText = '';
				uni.request({
					url: this.Tool.url('search', {
						keyword: this.kw,
						page: page
					}),
					success: (res) => {
						if (res.statusCode !== 200 && res.data.status !== 200) {
							this.Tool.alert('请求失败！')
							return false;
						}
						// console.log(res.data)
						this.fields = res.data;
						this.page = this.fields.current_page + 1;
						this.last_page = this.fields.last_page;
						this.list = page === 1 ? this.fields.data : this.list.concat(this.fields.data);

						if (!this.list.length) {
							this.erroText = '未能找到你要的结果！';
							this.resEmpyt = true;
						} else {
							this.hideBox();
							if (this.last_page === this.fields.current_page) this.loadTextFunc();
						}

					},
					fail: () => {
						this.list = [];
						this.erroText = '请求失败，点击重新加载！';
						this.hideBox();
					},
					complete: () => {
						this.$nextTick(function() {
							uni.hideLoading();
						});
						this.reqLock = false;
					}
				});

				this.searchTotal(); //统计关键词次数
			},
			searchTotal() {
				if (!this.kw) return false;

				uni.request({
					url: this.Tool.url('search_total', {
						'keyword': this.kw
					})
				})
			},
			BackPage() {
				uni.navigateBack({
					delta: 1
				});
			},
			link_url(id) {
				this.Tool.alert('正在跳转···')
				uni.navigateTo({
					url: '/pages/details/index?id=' + id
				})
			},
			boxDown(e) {
				this.boxCls = 'fadeInDown';
				this.getSearchKeyword();
			},
			hideBox() {
				this.boxCls = this.boxCls != 'none' ? 'fadeOutUp':'none';
			}
		}
	}
</script>

<style>
	.radius-top {
		border-top-left-radius: 12px;
		border-top-right-radius: 12px;
	}

	.radius-bottom {
		border-bottom-left-radius: 12px;
		border-bottom-right-radius: 12px;
	}
</style>
